
var map;
var markersArray = [];
var markerClustererArray = [];
var infowindow = new google.maps.InfoWindow();
google.maps.event.addDomListener(window, 'load', initialize);
console.log('Javascript from file OK');


function initialize() {
    
    var myLatlng = new google.maps.LatLng(55.750089,52.601591);
    var mapOptions = {
    zoom: 3,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map_canvas'),
                              mapOptions);
    
    createDB();
    loadPins("fmPoints.json");
    showAll();
    
//    var mcOptions = {gridSize: 50, maxZoom: 15};
//    mClastS = new MarkerClusterer(map, [], mcOptions);
//    mClastP = new MarkerClusterer(map, [], mcOptions);
//    mClastW = new MarkerClusterer(map, [], mcOptions);
//    mClastEr = new MarkerClusterer(map, [], mcOptions);
    
//    var marker = new google.maps.Marker({
//                                        position: myLatlng,
//                                        map: map,
//                                        title: 'Hello World!'
//                                        });
};
function clearPins() {


//    markersArray=[];
//
    for (var i = 0; i < markerClustererArray.length; i++ ) {
//        markerClustererArray[i].setMap(null);
        markerClustererArray[i].clearMarkers();
    }
    markerClustererArray.length = 0;
    
    for (var i = 0; i < markersArray.length; i++ ) {
        markersArray[i].setMap(null);
    }
    markersArray.length = 0;
    
//    markerClustererArray=[];
    
};
function  showAll(){
    
    clearPins();
    console.log('showAll');
    showAllPins("SELECT * FROM mPins");
}
function showPas(){

    clearPins();
    console.log('showPass');
    showAllPins("SELECT * FROM mPins WHERE type=0 or type=1");
}
function showWar(){
    clearPins();
    console.log('showWar');
    showAllPins("SELECT * FROM mPins WHERE type=0 or type=2");
}
function showEr(){
    clearPins();
    console.log('showErr');
    showAllPins("SELECT * FROM mPins WHERE type=0 or type=3");
}

function showAllPins(sqlStr) {
    
    if(!db){
        db = openDatabase("dbMap", "0.1", "A list of points.", 200000);
        console.log('Data Base open connection');
        if(!db){
            alert("Failed to connect to database.");
        }
    }else{console.log('Data Base was find');}
    if(sqlStr==null){
        sqlStr="SELECT * FROM mPins";
    }
    var markerCluster = new MarkerClusterer(map);
    
    mcOptionsPass = {styles: [{
                            height: 40,
                            url: "passed_group.png",
                            width: 35
                            },
                            {
                            height: 40,
                            url: "passed_group.png",
                            width: 35
                            },
                            {
                            height: 40,
                            url: "passed_group.png",
                            width: 35
                            },
                            {
                            height: 40,
                            url: "passed_group.png",
                            width: 35
                            },
                            {
                            height: 40,
                            url: "passed_group.png",
                            width: 35
                            }]}
    
    var markerCluster1 = new MarkerClusterer(map, [], mcOptionsPass);
    
    mcOptionsWar = {styles: [{
                            height: 40,
                            url: "warning_group.png",
                            width: 35
                            },
                            {
                            height: 40,
                            url: "warning_group.png",
                            width: 35
                            },
                            {
                            height: 40,
                            url: "warning_group.png",
                            width: 35
                            },
                            {
                            height: 40,
                            url: "warning_group.png",
                            width: 35
                            },
                            {
                            height: 40,
                            url: "warning_group.png",
                            width: 35
                            }]}
    var markerCluster2 = new MarkerClusterer(map, [], mcOptionsWar);
    
    mcOptionsEr = {styles: [{
                          height: 40,
                          url: "error_group.png",
                          width: 35
                          },
                          {
                          height: 40,
                          url: "error_group.png",
                          width: 35
                          },
                          {
                          height: 40,
                          url: "error_group.png",
                          width: 35
                          },
                          {
                          height: 40,
                          url: "error_group.png",
                          width: 35
                          },
                          {
                          height: 40,
                          url: "error_group.png",
                          width: 35
                          }]}
    
    var markerCluster3 = new MarkerClusterer(map, [], mcOptionsEr);

//    var markerClusterer = new MarkerClusterer(map, [], {
//                                          maxZoom: zoom,
//                                          gridSize: size,
//                                          styles: styles[style]
//                                          });
    db.transaction(function(tx) {
                   tx.executeSql(sqlStr, [],
                                 function(tx, result) {
                                     for(var i = 0; i < result.rows.length; i++) {
                                         var row = result.rows.item(i)
                                         //add new pin
                                         console.log(row['address']+row['ident']);
                                         var myLatlng = new google.maps.LatLng(row['lat'],row['longt']);
                                         var marker;
                                 
                                         if(row['type']==0){
                                 
                                            marker = new google.maps.Marker({
                                                                  position: myLatlng,
                                                                  icon:'pin1-1.png',
                                                                  map: map,
                                                                  title: row['address']
                                                                  });
//                                            markerCluster.addMarker(marker);

                                         }else if(row['type']==1){
                                 
                                            marker = new google.maps.Marker({
                                                                 position: myLatlng,
                                                                 icon:'icon_passed-2.png',
                                                                 map: map,
                                                                 title: row['address']
                                                                 });
                                            markerCluster1.addMarker(marker);
                                         }else if(row['type']==2){
                                            marker = new google.maps.Marker({
                                                                 position: myLatlng,
                                                                 icon:'icon_warning-2.png',
                                                                 map: map,
                                                                 title: row['address']
                                                                 });
                                            markerCluster2.addMarker(marker);
                                         }else if(row['type']==3){
                                            marker = new google.maps.Marker({
                                                                 position: myLatlng,
                                                                 icon:'icon_error-2.png',
                                                                 map: map,
                                                                 title: row['address']
                                                                 });
                                            markerCluster3.addMarker(marker);
                                         }
                                 
                                         marker.note = '<b>Address:  </b> ' + row['address'];
                                         google.maps.event.addListener(marker, 'click', function () {
                                                                          infowindow.setContent(this.note);
                                                                          infowindow.open(map, this);
//                                                               this.info.open(map, this);
                                         });
                                         markersArray.push(marker);
                                 
                                 
                                     }
                                     markerClustererArray.push(markerCluster);
                                     markerClustererArray.push(markerCluster1);
                                     markerClustererArray.push(markerCluster2);
                                     markerClustererArray.push(markerCluster3);
                                     var passed = document.getElementById('passed');
                                     passed.innerHTML=markerCluster1.markers_.length;
                                     var warning = document.getElementById('warning');
                                     warning.innerHTML=markerCluster2.markers_.length;
                                     var error = document.getElementById('error');
                                     error.innerHTML=markerCluster3.markers_.length;
                                 
//                                     var markerCluster = new MarkerClusterer(map, markersArray);
                                 }, function (tx, error) {
                                 console.log(error);
                                 })});
};